<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.wrap{
			width: 500px;
			height: 250px;
			background-color: #269ABC;
			overflow: hidden;
			margin:20px auto;
		}
		.box{
			position: relative;
			height: 250px;
		}
		.box > a{
			position: absolute;
			left: 0;
			top: 50%;
			margin-top: -25px;
			width: 50px;
			height: 50px;
			background-color: #555555;
			cursor: pointer;
		}
		.box > a{
			display: none;
		}
		.box:hover a{
			display: block;
		}
		.box > a.right{
			left: auto;
			right: 0;
		}
		img{
			width: 500px;
			height: 250px;
		}
		.box ul{
			width: calc(500px*5);
			background-color: #285E8E;
			height: 250px;
			margin-left: -500px;
		}
		.box li{
			float: left;
			list-style: none;
		}
	</style>
	<body>
		<div class="wrap">
			<div class="box">
				<ul>
					<li class="1"><a href=""><img src="img/1.jpg"/></a></li>
					<li class="2"><a href=""><img src="img/2.jpg"/></a></li>
					<li class="3"><a href=""><img src="img/3.jpg"/></a></li>
					<li class="4"><a href=""><img src="img/4.jpg"/></a></li>
					<li class="5"><a href=""><img src="img/5.jpg"/></a></li>
					<li class="6"><a href=""><img src="img/6.jpg"/></a></li>
				</ul>
				<a class="left"></a>
				<a class="right"></a>
			</div>
		</div>
		<script src="js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			
			!function(){
				var imgw = $(".box li").width(),
					lis = $(".box li"),
					lilen = $(".box li").length,
					imgL = $(".box li").last(),
					timr;
				$(".box a").on("click",function(){
					if($(".box > ul:animated").length > 0){
						return;
					}
					if($(this).hasClass("right")){
						var imgF = $(".box li").first()
						$(".box ul").animate({
							"margin-left":-imgw*2,
						}, 1000,function(){
							$(".box ul").append(imgF);
							$(".box ul").css("margin-left",-imgw);
						});
					} else{
						var imgLs = $(".box li").last();
						$(".box ul").animate({
							"margin-left":0,
						},1000,function(){
							$(".box ul").prepend(imgLs);
							$(".box ul").css("margin-left",-imgw);
						})
					}
				})
				$(".box").on("mouseenter",function(){
					clearInterval(timr)
				}).on("mouseleave",function(){
					returns()
				})
				function returns(){
					timr = setInterval(function(){
						$(".box a").filter(".right").trigger("click");
					},1000)
				}
				returns()
			}()
		</script>
	</body>
</html>
